<template>
  <div class="aillo-notification-panel">
    <Dialog
      :modal="false"
      :visible.sync="visible"
      width="400px"
      :before-close="handleClose">
      <div class="aillo-notification-panel-body__title" slot="title">通知提示</div>
      <div class="aillo-notification-panel-body">
        <div class="aillo-notification-panel-body__tip">打开屏幕横幅通知</div>
        <Checkbox class="aillo-notification-panel-body__checkbox" v-model="checked1">通知显示消息详情</Checkbox>
        <Checkbox class="aillo-notification-panel-body__checkbox" v-model="checked2">打开登录、新消息通知提示音</Checkbox>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { Dialog, Checkbox } from 'element-ui'
export default {
  components: { Dialog, Checkbox },
  props: ['visible'],
  data () {
    return {
      checked1: false,
      checked2: false
    }
  },
  methods: {
    handleClose () {
      this.$emit('closeVisible')
    }
  }
}
</script>

<style lang="scss">
.aillo-notification-panel {
  .el-dialog {
    border-radius: 6px;
  }
  .el-checkbox__inner {
    border-radius: 50px;
  }
  .el-dialog__body {
    padding-top: 0px;
  }
  .aillo-notification-panel-body {
    widows: 100%;
    height: 100%;
    &__title {
      font-size: 20px;
      font-weight: 600;
    }
    &__tip {
      font-size:14px;
      font-family:Source Han Sans CN;
      font-weight:400;
      color:rgba(102,102,102,1);
      margin-bottom: 40px;
    }
    &__checkbox {
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
}
</style>
